<template>
  <div class="parkMapWrapWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div class="colorWrap">
        <div class="checkWrap" style="text-align: left;">
          <el-radio-group v-model="enterpriseNo" size="mini" @change="changeRadio()">
            <div v-for="(item,index) in companyInfos" :key="index" style="line-height: 35px;text-align: left;">
              <span class="companyList">
                <el-radio-button :label="item.enterpriseNo">{{item.enterpriseName}}</el-radio-button></span>
              <span class="companyCount">{{item.count}}</span>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>

  export default {
    props: [ "parentId", "areaInfo","mapInfolist","streetData","searchInfo","companyInfos"],
    data () {
      return {
        map: "",
        enterpriseNo: null,
        searchInfoWindow: "",
        mapInfoWindow: "",
        markers: [],
        timeLength:5,
        mapClickMarker: "",
        ply: [],
        mapIndex: 0,
        isrun:false,
        Plg:"",
        indervalTimer:""

      }

    },
    mounted(){
      this.getHotMap()
    },
    created(){

    },
    methods: {
      changeRadio(){
        this.$emit("changeCompany",this.enterpriseNo)
      },

      //百度提取区域经纬度
      showAreaCenter(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

            _this.map.addOverlay(_this.ply);  //添加覆盖物
            _this.map.setViewport(_this.ply.getPath());    //调整视野
            _this.map.setZoom(13)

        }else {
          this.map.setCenter(new BMap.Point(114.14101345267,22.6485544122),11)
          _this.map.setZoom(11)
        }

      },
      showAreaPoints(regionPoints){
        this.clearAll()
        this.showAreaCenter(regionPoints)
        let content1,content2
        if(this.mapInfolist.length>0){
          this.mapInfolist.forEach(item=>{
            content1 = item.regionName
            content2 =item.count

            if(this.parentId){
              this.addLabel(item.lng, item.lat, content1+':'+content2)
            }else {
              this.addLabel(item.lng, item.lat, content1)
              this.addLabel(item.lng, item.lat-0.018, content2)
            }

          })
        }else {
          this.mapIndex=0
          this.timeLength=5
          this.isrun=false
          clearInterval(this.indervalTimer)
        }

          if(this.parentId){
            this.streetData.forEach(item=>{
              this.showArea(JSON.parse(item.regionPoints))
            })
          }else {
            this.$store.state.districtData.forEach(item=>{
              this.showArea(JSON.parse(item.regionPoints))
            })
          }


      },
      addLabel(lng, lat, cotent){

        let point = new BMap.Point(lng, lat);
        let label = new BMap.Label(cotent, {
          position: point,    // 指定文本标注所在的地理位置
          offset: new BMap.Size(-50, 0)    //设置文本偏移量
        });  // 创建文本标注对象
        label.setStyle({
          color: "white",
          fontSize: "13px",
          border: "0",
          height: "20px",
          backgroundColor: "0.05", //文本标注背景颜色　
          lineHeight: "20px",
          fontFamily: "微软雅黑"
        });
        this.map.addOverlay(label);
      },

      //百度提取区域经纬度
      getBoundary(areaPoints) {
        this.clearAll()
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

            _this.map.addOverlay(_this.ply);  //添加覆盖物
            _this.map.setViewport(_this.ply.getPath());    //调整视野

        }
      },

      //百度提取区域经纬度
      showArea(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
//          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //              Polyline  Polygon
          _this.Plg = new BMap.Polygon(arr, {
            strokeColor: "white",    //边线颜色。
            fillColor: "#3975FE",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.8,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.Plg);  //添加覆盖物
          _this.Plg.disableMassClear()
//          _this.map.setViewport(_this.ply.getPath());    //调整视野
        }
      },
      clearAll(){
        if(this.mapInfoWindow){
          this.mapInfoWindow.close()
        }
        let allOverlay = this.map.getOverlays();
        if(allOverlay){
          for (var i = 0; i < allOverlay.length; i++) {
            allOverlay[i].enableMassClear();
          }
          }

        this.map.clearOverlays();
      },
      //清除指定覆盖物
      deletePoint(){
        let allOverlay = this.map.getOverlays();
        for (var i = 0; i < allOverlay.length - 1; i++) {
          if (allOverlay[i].getLabel().content == "我是id=1") {
            this.map.removeOverlay(allOverlay[i]);
            return false;
          }
        }
      },

      getHotMap(){
        let _this = this
        _this.map = new BMap.Map("mapContainer", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });          // 创建地图实例

        _this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        });

        _this.map.centerAndZoom(new BMap.Point(114.14101345267,22.6485544122), 11);             // 初始化地图，设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        this.map.addControl( new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
//        地图点击事件
        setTimeout(()=>{
          _this.addClickForMap()  //地图监听
        })
      },

      addClickForMap(){
        let _this = this
        this.map.addEventListener("click", function (e) {
            let point = e.point, regionName = "", searchInfo = {}, streetId = "",parentId
            _this.axios.post(process.env.API_HOST + `/common/selectRegionByPoint`, {lat: point.lat, lng: point.lng})
              .then(response => {
                const result = response.data
                if (result.code == 200) {
                  if(_this.parentId&&_this.parentId!=result.result.id){
                    return
                  }
                  //调整视野绘制区域

                  if (_this.parentId && result.result.child) { //有行政区 查询街道
                    regionName = result.result.regionName + result.result.child.regionName
                    parentId=result.result.id
                    streetId = result.result.child.id
                    /*if (result.result.child.regionPoints) {
                      _this.getBoundary(JSON.parse(result.result.child.regionPoints))
                    }*/
                  } else {  //无行政区 查询区域
                    regionName = result.result.regionName
                    parentId=result.result.id
//                    streetId = result.result.id
                    /*if (result.result.regionPoints) {
                      _this.getBoundary(JSON.parse(result.result.regionPoints))
                    }*/
                  }

                  _this.axios.post(process.env.API_HOST + `/put/selectPutHistoryCount`, {
                    putDistrict: parentId,
                    putStreet: streetId,
                    beginTime:_this.searchInfo.beginTime,
                    endTime:_this.searchInfo.endTime
                  })
                    .then(data => {
                      const info = data.data
                      if (info.code == 200) {
                        if (info.result&&!_this.enterpriseNo) {
                          _this.clickMapSearch(point, {...info.result,regionName:regionName})
                        }
                      }
                    })
                }
              })

        }, false)

      },
      clickMapSearch(point, info){
        let totalCount=0,contentIner=""
        if(info.enterpriseList.length>0){
          totalCount=info.total
          info.enterpriseList.forEach((item,key)=>{
            let enterpriseName=item.enterpriseName?item.enterpriseName:"企业"+key
            contentIner+='<div style="padding: 0 10px;color: #50545D;">'+enterpriseName+'：' + item.count + '</div> '
          })
        }
        let content, name = info.regionName, _this = this
        //创建检索信息窗口对象
        _this.mapInfoWindow = null;
          if(this.IEVersion()==-1){
            content = '<div class="mapTopWrap" > '+
              '<div class="mapTopWrap" > <div class="mapBaseTitle" style="border-right: 1px solid #EFEEF3;margin-right: -1px;">车辆统计</div> ' +
              '<div style="float: left;line-height: 30px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">'+'总数'+'：' + totalCount + '</div> ' +contentIner+'</div></div> '
          }else {

            content = '<div class="mapTopWrap" > '+
              '<div class="mapTopWrap" > <div style="color: #3975FE;font-size: 12px;padding-left: 10px;padding-bottom: 5px;">车辆统计</div> ' +
              '<div style="line-height: 25px;"><div style="padding: 0 10px;color: #50545D;">'+'总数'+'：' + totalCount + '</div>  ' +contentIner+'</div></div> '

          }

        _this.mapInfoWindow = new BMapLib.SearchInfoWindow(_this.map, content, {
          title: name,      //标题
          panel: "panel",         //检索结果面板
          enableAutoPan: true,     //自动平移
          offset: new BMap.Size(-20, -20),
          searchTypes: []
        });
        _this.mapClickMarker = new BMap.Marker(point); //创建marker对象
        _this.mapInfoWindow.open(_this.mapClickMarker)

      },
      addMarkes(dataInnfo){
        let _this = this, vectorMarker, arr = []
        dataInnfo.forEach((item2, index) => {
          let color = this.colorslist[index].color
          if (item2.length > 0) {
            item2.forEach(item1 => {
              if (item1.areaPoints.length > 0) {
                arr = []
                item1.areaPoints.forEach(item => {
                  arr.push(new BMap.Point(item.lng, item.lat))
                })
                vectorMarker = new BMap.Polygon(arr, {
                  strokeColor: color,    //边线颜色。
                  fillColor: color,      //填充颜色。当参数为空时，圆形将没有填充效果。
                  strokeWeight: 1,       //边线的宽度，以像素为单位。
                  strokeOpacity: 0.9,    //边线透明度，取值范围0 - 1。
                  fillOpacity: 0.2,      //填充的透明度，取值范围0 - 1。
                  strokeStyle: 'solid' //边线的样式，solid或dashed。
                });  //创建多边形
                _this.map.addOverlay(vectorMarker);
//                点击事件
//            _this.addClickHandler(vectorMarker, item1.areaPoints);
              }
            })
          }
        })
      },
      addClickHandler (marker, info) {
        let _this = this
        marker.addEventListener("click", function (e) {
            let point = e.point
            let content, name = info.areaName, areaType = info.areaType == 0 ? '智能站点' : '电子围栏'

            //创建检索信息窗口对象
            this.searchInfoWindow = null;
            if (info.areaType == 0) {
              content = '<div class="mapTopWrap" > <div class="mapBaseTitle" >设施信息</div> <div style="float: left;line-height: 31px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">设施类型：' + areaType + '</div> <div style="padding: 0 10px;color: #50545D;">车桩数量：' + info.volume + '</div> <div  style="padding: 0 10px;color: #50545D;">停放数量：' + info.parkNum + '</div> </div> </div> '
            } else if (info.areaType == 1) {
              content = '<div class="mapTopWrap" > <div class="mapBaseTitle" >设施信息</div> <div style="float: left;line-height: 31px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">设施类型：' + areaType + '</div> <div style="padding: 0 10px;color: #50545D;">围栏容量：' + info.volume + '</div> <div  style="padding: 0 10px;color: #50545D;">停放数量：' + info.parkNum + '</div> </div> </div> '
            }

            this.searchInfoWindow = new BMapLib.SearchInfoWindow(this.map, content, {
              title: name,      //标题
              panel: "panel",         //检索结果面板
              enableAutoPan: true,     //自动平移
              offset: new BMap.Size(-20, -20),
              searchTypes: []
            });
            this.marker = new BMap.Marker(point); //创建marker对象
            this.searchInfoWindow.open(this.marker)

          }, true
        )
      },
      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },

    },
    watch: {

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .parkMapWrapWrap
    width: 100%;
    height 100%
    &:hover .infoButton
      opacity: 1 !important;
    .containerWrap
      height: 100%;
      width: 100%;
      margin 0px auto;
      position: relative;
      .colorWrap
        position: absolute;
        left 10px;
        top: 10px;
        background-color rgba(255, 255, 255, 0.7)
        line-height 20px
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        .checkWrap
          line-height 35px;
          .el-radio-button
            .el-radio-button__inner
              border-radius 10px
              padding 5px 15px
          .is-active
            .el-radio-button__inner
              background-color: #3975FE
              border-radius 10px
              border-color #3975FE
          .companyCount
            font-size: 14px;
            color: #3975FE;
            font-weight: bold;
            line-height: 28px;
            vertical-align: middle;
        .colorlist
          margin-top 12px
          margin-right 10px
          float left;
          display: inline-block;
          width: 10px;
          height 10px;
          border-radius: 50%;
        .companyList
          display: inline-block;
          width: 70px;
          text-align: left;
      .sliderWrap
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width 100%
        height 48px
        vertical-align middle
        background-color rgba(255, 255, 255, 0.8)
        text-align center
        z-index 5
        .sliderinner
          width: 89%;padding-left: 20px;display: inline-block;
          .timeText
            position: relative;margin-top: -8px;font-size: 12px;
        .moveWrap
          display: inline-block;vertical-align: middle;
          margin-right 10px;
        .iconfont
          font-size 28px
          color #3975FE
          cursor pointer
          &:hover
            color #809fe6
      .infoButton
        height 31px
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          display: inline-block;
          font-size: 18px;
          cursor pointer
      .colorWrapRack
        position: absolute;
        left 10px;
        top: 10px;
        line-height 25px
        vertical-align middle
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        background-color rgba(255, 255, 255, 0.8)
        .colorlist
          display: inline-block;
          width: 21px;
          height 13px;
          line-height: 25px;
          vertical-align: middle;
        .labelStyle
          font-size: 12px;
          color: #50545D;
          float: right;
          margin-left: 10px;
        .countStyle
          color: #3975FE;
          float: right;
          min-width: 40px;
          text-align: right;
      #mapContainer
        height: 100%;
        width: 100%;
    .BMap_scaleCtrl
      bottom 20px !important
    .mapTopWrap
      background-color: white;
      overflow: hidden;
      min-height 90px;
      width 190px

      .mapBaseTitle
        color: #3975FE;
        font-size: 12px;
        writing-mode: vertical-lr;
        letter-spacing: 5px;
        float: left;
        padding: 11px;

    .BMapLib_SearchInfoWindow
      width 200px !important
      &::after
        content: ""
        position: absolute;
        background-color: white;
        width: 100px;
        height: 3px;
        bottom: 0px;
        left: 50px;
        z-index 100

    .BMapLib_bubble_title {
      padding-left: 14px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      background-color white
      border-radius 10px !important
      /*display none !important*/
    }

    .BMapLib_bubble_top, .BMapLib_bubble_close {
      border-radius 10px !important
      border none !important
      background-color #f9f9f9 !important
    }

    #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
      border-radius 10px !important
      /*min-width 200px !important*/
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
      border none
    }

    .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
      position static !important /*position absolute
      left 0
      top 31px*/
    }

    .BMapLib_bubble_content {
      min-height 100px !important
    }

</style>
